<template>
  <div>
    <div class="back" @click="back"><i class="el-icon-arrow-left"></i>返回</div>
    <div class="videoBox">
    <video
      class="vid"
      ref="videoElement"
      controls
      autoplay
      muted
      width="100%"
      height="100%"
    ></video>
    </div>
  </div>
</template>

<script>
import Hls from 'hls.js'
import 'video.js/dist/video-js.css'
import videojs from 'video.js'
export default {
  name: 'SevencolorUserIndex',

  data () {
    return {
      serialNumber: [
        { name: '苗情监控02', num: 'AW6272882' },
        { name: '苗情监控01', num: 'AW6272948' },
        { name: '基地监控01', num: 'AZ4843485' },
        { name: '基地监控02', num: 'AZ4843367' }
      ],
      videoUrl: 'https://open.ys7.com/v3/openlive/C37589148_2_2.m3u8?expire=1730356441&id=641646475918446592&t=518146a8b54286749b289c7d6b16dffd5327fa517f9a00519c8fd915420f5778&ev=100'
    }
  },

  mounted () {
    this.videoShow(this.videoUrl)
  },

  methods: {
    videoShow (videoUrl) {
      console.log(videoUrl)
      if (Hls.isSupported()) {
        const video = this.$refs.videoElement
        const hls = new Hls()
        hls.loadSource(videoUrl)
        hls.attachMedia(video)
      } else {
        // 如果不支持HLS，则回退到其他视频格式的播放方式
        if (videojs.getTech('Html5').isSupported()) {
          const video = videojs(this.$refs.videoElement)
          video.src(videoUrl)
        }
      }
    },
    back () {
      this.$router.push({
        path: '/shuzhongtian/agriMonitoring'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.back {
  font-size: 1.1542vw;
  margin-bottom: 1.5625vw * 0.834;
  width: 5.2083vw;
  cursor: pointer;
}
.videoBox {
width: 80vw;
height: 44.9479vw*0.834;
background: #E4E7E9;
border-radius: 20px 20px 20px 20px;
overflow: hidden;
}
</style>
